<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>{$siteInfo['title']}-{$siteInfo['subtitle']}</title>
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <meta name="description" content="{$siteInfo['description']}">
    <meta name="keywords" content="{$siteInfo['keyword']}">
    <link rel="stylesheet" href="_THEMES_/blog/static/layui/css/layui.css" />
    <link rel="stylesheet" href="_THEMES_/blog/static/css/home.css" />
    <script type="text/javascript" src="_THEMES_/blog/static/js/jquery-3.2.1.min.js" ></script>
    <script type="text/javascript" src="_THEMES_/blog//static/layui/layui.js" ></script>
    <script type="text/javascript" src="_THEMES_/blog/static/js/home.js" ></script>
    <script type="text/javascript" src="_THEMES_/blog/static/js/common.js" ></script>
    <style>
      body{background:#f6f6f6;}
    </style>
  </head>
  <body>
    {include file="common/nav" /}
    <!--内容DIV-->
    <div class="content">
      <!--轮播图-->
       {notempty name="carousel"}
      <div class="layui-carousel" style="margin-top: 20px;margin-bottom:20px;float: left;" id="test1">
        <div carousel-item class="lunbo">
          {volist name="carousel" id="vo"}
          <div><a href="{:url('/'.$vo.article_id)}"><img style="position: absolute;z-index:0;width:100%;height:100%" src="{$vo.img|default='/uploads/default/default_cover.jpg'}" /><div style="width:1200px;height:100px;padding:8px;position: absolute;bottom:0px;left:0px;z-index:9;color:#fff;font-size: 18px;background-image:-webkit-linear-gradient(top, transparent 0%, transparent 30%, rgba(0,0,0,0.8) 100%);"><h4 style="position: relative;top:45px;">{$vo.title}</h4></div></a></div>
          {/volist}
        </div>
      </div>
      <script>
        layui.use('carousel', function(){
          var carousel = layui.carousel;
          //建造实例
          carousel.render({
            elem: '#test1'
            ,width: '100%' //设置容器宽度
            ,height:'400px'
            //,arrow: 'always' //始终显示箭头
            //,anim: 'updown' //切换动画方式
          });
        });
      </script>
       {/notempty}
      <!--置顶推荐-->
      {notempty name="topArticle"}
      <div class="tui">
        <h2>置顶推荐</h2>
        <hr class="layui-bg-red"/>
        <ul>
          {volist name="topArticle" id="vo"}
          <li><!-- <a href="{:url('/category/' .$vo.category_id)}"><div class="cargory">{$vo.category_name}</div></a><a href="{:url('/' .$vo.article_id)}"> --><img src="{$vo.img|default='/uploads/default/default_cover.jpg'}" /><div class="title"><h4>{$vo.title}</h4></div></a></li>
          {/volist}
        </ul>
      </div>
      {/notempty}
      <!--广告钩子-->
      {:hook('ad1')}
      {include file="common/right" /}
      <!--正文文章列表-->
      <div class="list" id="new-list"></div>
      <div class="load" id="load-new">加载更多</div>
    </div>
    {include file="common/tool" /}
    {include file="common/footer" /}
    <script>
      var page = 1;
      loadNews(page);
      $("#load-new").click(function () {
        page = page +1;
        loadNews(page)
      })
      function loadNews(page) {
        $.ajax({
          type: "POST",
          url: "/home/index/newList",
          data: {
            page: page
          },
          success: function (newList) {
            if (newList == ""){
              $("#load-new").text("没有更多了")
              $("#load-new").css({"background":"#999","cursor":"default" })
            }
            $.each(newList, function (index, item) {
              
              var createTime = getMyDate(item.create_time);
              if (item.img == "") {
                item.img = '/uploads/default/default_cover.jpg';
              }
              $("#new-list").append('  <div class="list-content">' +
                      '          <div class="list-img"><img src="' + item.img + '"/></div>\n' +
                      '          <div class="list-right">' +
                      '            <a  href="' + '/' + item.article_id + '.html" target="_blank">' + item.title + '</a>' +
                      '            <p style="color: #C0C0C0;margin: 5px;">' +
                      '              <i class="layui-icon" style="font-size: 15px;">&#xe638;</i>' + item.category_name +
                      '              <i class="layui-icon" style="font-size: 15px;">&#xe612;</i>' + item.username +
                      '              浏览：' + item.read_count +
                      '              <i class="layui-icon" style="font-size: 15px;">&#xe60e;</i>' + createTime +
                      '            </p>' +
                      '            <p style="color: rgba(0,0,0,.6);font-size: 1rem;margin-top: 20px">' + item.introduce.substr(0, 70) + '</p>' +
                      '          </div>' +
                      '        </div>' +
                      '        <hr />')
            })
          }
        })
      }
    </script>
  </body>
</html>
